<template>
	<view class="page" :style="'background-image: url('+indexBg+');'">
    <u-navbar :autoBack="false" :fixed="false" title="注册Gowork" placeholder bgColor="transparent">
      <view
        class="u-flex"
        slot="left"
      >
        <u-icon
          name="home"
          v-if="isHome"
          color="#fff"
          size="40rpx"
          @click="reLaunch('/pages/index/isLoginIndex')"
        ></u-icon>
        <u-icon
          name="arrow-left"
          v-else
          size="38rpx"
          color="#fff"
          @click="goBack(1)"
        ></u-icon>
      </view>
    </u-navbar>
    <view class="register form-info">
      <view class="form-box">
        <view class="form-item">
          <view class="form-lable required">联系人姓名</view>
          <view class="form-content">
            <u--input placeholder="请输入" border="none" inputAlign="right" v-model="form.contacts" />
          </view>
        </view>
        <view class="form-item">
          <view class="form-lable required">公司名称</view>
          <view class="form-content">
            <u--input placeholder="请输入" border="none" inputAlign="right" v-model="form.enterpriseName" />
          </view>
        </view>
        <view class="form-item">
          <view class="form-lable required">统一社会信用代码</view>
          <view class="form-content">
            <u--input placeholder="请输入" border="none" inputAlign="right" v-model="form.usci" />
          </view>
        </view>
        <view class="form-item">
          <view class="form-lable required">登录密码</view>
          <view class="form-content">
            <u--input placeholder="请输入" border="none" inputAlign="right" v-model="form.password" />
            <view class="form-content-tips">电脑端登录使用</view>
          </view>
        </view>
        <view class="form-item">
          <view class="form-lable">所在地区</view>
          <view class="form-content" @click="pickerType = 'region'">
            <u--input placeholder="请选择" readonly border="none" inputAlign="right" v-model="form.region" />
          </view>
        </view>
        <view class="form-item">
          <view class="form-lable">所属行业</view>
          <view class="form-content" @click="pickerType = 'industry'">
            <u--input placeholder="请选择" readonly border="none" inputAlign="right" v-model="form.industry" />
          </view>
        </view>
        <view class="form-item">
          <view class="form-lable">推荐人手机号码</view>
          <view class="form-content">
            <u--input type="number" maxlength="11" :readonly="recommend" placeholder="请输入" border="none" inputAlign="right" v-model="form.recommendPhone" />
          </view>
        </view>
      </view>
      <button class="getPhoneNumber" :phone-number-no-quota-toast="false" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信授权注册</button>
      <u-picker :show="pickerType=='region'" @change="pickerChange" :columns="[cityOptions, cityOptions[pickerIndex].citys]" keyName="cityName" @confirm="pickerConfirm" @cancel="pickerType = ''"></u-picker>
      <u-picker :show="pickerType=='industry'" :columns="[industryList]" keyName="sectorName" @confirm="pickerConfirm" @cancel="pickerType = ''"></u-picker>
    </view>
  </view>
</template>

<script>
import { register, sectorList } from '@/api/index'
import citys from '@/common/citys.json'
import { phoneReg } from '@/common/util'

export default {
  data() {
    return {
      indexBg: 'https://gowork365.com/prod-api/profile/mini/index/indexBg1.png',
      cityOptions: citys.provinces,
      pickerType: '',
      pickerIndex: 0,
      form: {
        contacts: '',
        enterpriseName: '',
        usci: '',
        password: '',
      },
      recommend: false,
      industryList: [],
      isHome: false,
    }
  },
  onLoad(options) {
    let pages = getCurrentPages()
    if(pages.length == 1) {
      this.isHome = true
    }
    if(options.recommendPhone) {
      this.recommend = true
      this.form.recommendPhone = options.recommendPhone
    }
    this.getSectorList()
  },
  methods: {
    getSectorList() {
      sectorList({}).then(res => {
        this.industryList = res.data
      })
    },
    getPhoneNumber (e) {
      const that = this
      let formFlag = false
      for(let key in this.form) {
        if(this.form[key] === '') {
          formFlag = true
        }
      }
      if(formFlag) {
        uni.showToast({
          icon: 'none',
          title: '请完善基本信息'
        })
        return
      }
      if(this.form.phoneNumber && !phoneReg(this.form.phoneNumber)) {
        return
      }
			if(e.detail.errMsg == 'getPhoneNumber:fail user deny') {
      } else if(e.detail.code) {
        uni.login({
          provider: 'weixin', //使用微信登录
          success: async function(loginRes) {
            uni.showLoading({ mask: true })
            register({ jsCode: loginRes.code, phone: e.detail.code, ...that.form }).then(res => {
              uni.hideLoading({})
              uni.showToast({
                icon: 'none',
                title: '注册成功'
              })
              setTimeout(() => {
                if(that.isHome) {
                  that.reLaunch('/pages/index/isLoginIndex')
                } else {
                  that.goBack(1)
                }
              }, 1000)
            })
          }
        });
      }
    },
    pickerConfirm(e) {
      if(this.pickerType == 'region') {
        this.form.region = e.value[0].cityName + '-' + e.value[1].cityName
      } else {
        this.form.industry = e.value[0].sectorName
      }
      this.pickerType = ''
    },
    pickerChange(e) {
      if(e.columnIndex === 0) {
        this.pickerIndex = e.index
      }
    },
  }
}
</script>

<style lang="less" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  background: #F4F7F6;
  position: relative;
  background-repeat: no-repeat;
  background-size: 750rpx 690rpx;
  padding-bottom: 188rpx;
  display: flex;
  flex-direction: column;
  .register {
    flex: 1;
  }
  .getPhoneNumber {
    width: 654rpx;
    height: 96rpx;
    line-height: 96rpx;
    background: #00BA81;
    border-radius: 4rpx;
    margin: 0 auto;
    margin-top: 64rpx;
    font-family: PingFangSC, PingFang SC;
    font-size: 32rpx;
    color: #FFFFFF;
    text-align: center;
  }
}
</style>
